<template>
<div>
    <div class="commentItem">
        <parent 
            v-if="postParent.parent" 
            :postParent="postParent.parent" 
            @handleParent="handleParent" 
            @dian="dian"
            :date="test.date(postParent.created_at)"
        />
        <div class="user">
            <img :src="$axios.defaults.baseURL + postParent.account.defaultAvatar" alt="">
            <span>{{postParent.account.nickname}}</span>
            <span>{{date}}</span>
            <span>{{postParent.id}}</span>
        </div>
        <div class="content" @mouseenter="isShow = true" @mouseleave="isShow = false">
            <div class="top">{{postParent.content}}</div>
            <div v-if="postParent.pics[0]">
                <img  v-for="(item,index) in postParent.pics" :key="index" :src="$axios.defaults.baseURL+item.url" alt="">
            </div>
            <div class="reply">
                <span class="iconfont iconding icon" @click="handleDian"></span>
                <span v-show="isShow" @click="handleClick">回复</span>
            </div>
        </div>
    </div>
</div>
</template>

<script>
export default {
    name:"parent",
    props:['postParent','date'],
    data() {
        return {
            isShow:false,
        }
    },
    methods:{
        handleClick() {
            const data = {follow:this.postParent.id,author:this.postParent.account.nickname}
            this.$emit('handleParent',data)
        },
        handleParent(data) {
            this.$emit("handleParent",data)
        },
        handleDian() {
            this.$emit('dian')
        },
        dian(id) {
            this.$emit('dian',id)
        } 
    }
}
</script>

<style>

</style>